<template>

  <!-- 下拉菜单进行封装（有时间 矿区 台站筛选器） -->
  <div class="tool-space">
    <van-row type="flex">
      <!--      时间筛选器（权限：超级管理员/矿区管理员）-->
      <van-col :span="colSpan">
        <van-cell is-link @click="showPopup">选择时间</van-cell>
        <van-popup v-model="show" closeable position="top" :style="{height:'30%'}">
          <div class="sieveContainer">
            <p>时间筛选器</p>
            <div class="inputContainer" v-if="this.title !== 'Stations'">
              <label for="startTime">起始时间:</label>
              <input type="date" id="startTime" :max="max_date" :min="this.min_date">
            </div>
            <div class="inputContainer" v-if="this.title === 'Stations'">
              <label for="stationTime">筛选时间:</label>
              <input type="date" id="stationTime" :max="max_date" :value="this.nowDate">
            </div>
            <div class="inputContainer" v-if="this.title !== 'Stations'">
              <label for="endTime">结束时间:</label>
              <input type="date" id="endTime" :max="max_date" :value="this.nowDate">
            </div>
            <div class="inputContainer">
              <van-button type="primary"  @click="requestDataByDate()">确定</van-button>
            </div>
          </div>
        </van-popup>
      </van-col>
      <!--      矿区筛选器（权限：超级管理员）-->
      <van-col :span="colSpan" v-if="role === 'ROLE_admin'">
        <van-cell is-link @click="showAreaFunc">选择矿区</van-cell>
        <van-popup v-model="showArea"  position="bottom" :style="{height:'30%'}">
          <div class="sieveContainer">
            <van-picker
                title="矿区筛选器"
                show-toolbar
                :columns="mineColumns"
                @confirm="onConfirm"
                @cancel="onCancel"
            />
          </div>
        </van-popup>
      </van-col>
      <!--      台站筛选器（权限：超级管理员/矿区管理员，仅在表格界面的台站工况信息表中显示）-->
<!--      <van-col :span="colSpan"  v-if="title === 'stationTable'">-->
<!--        <van-cell is-link @click="showStationFunc">选择台站</van-cell>-->
<!--        <van-popup v-model="showStation"  position="bottom" :style="{height:'30%'}">-->
<!--          <div class="sieveContainer">-->
<!--            <van-picker-->
<!--                title="台站筛选器"-->
<!--                show-toolbar-->
<!--                :columns="stationColumns"-->
<!--                @confirm="onConfirm"-->
<!--                @cancel="onCancel"-->
<!--            />-->
<!--          </div>-->
<!--        </van-popup>-->
<!--      </van-col>-->
    </van-row>
  </div>

</template>

<script>
import { Toast } from 'vant';

export default {
  name: "SeiveAdapter",
  data() {
    return {
      show: false,
      showArea: false,
      showStation: false,
      // boolStation: '',
      title: this.$store.state.jumpPage.titleRes,
      //默认筛选器入口按钮布局为8，根据页面自适应
      colSpan: 8,
      stationColumns: ['R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y','Z'],
      mineColumns: ['红阳三矿','平顶山','大同','双鸭山','马道头'],
      role:this.$store.state.userInfo.role,
      nowDate:'',
      max_date:'',
      min_date:'',
      sieveInfo:{
        startTime:'',
        endTime:'',
        stationTime:''
      }
    }
  },
  created() {
    //根据页面title选择挂载布局的colSpan
    this.boolColSpan();
    this.seiveTime();
  },
  methods: {
    requestDataByDate(){
      let startTime = document.getElementById('startTime').value;
      let endTime = document.getElementById('endTime').value;
      if (startTime === ''){
        Toast.fail({
          message:"请设置起始时间",
          duration:1500
        });
      }else {
        if ((new Date(startTime.replace(/-/g,"/")))>(new Date(endTime.replace(/-/g,"/")))){
          Toast.fail({
            message:'开始时间不能大于结束时间',
            duration:1500
          })
        }else {
          //将数值提交到vuex中
          this.sieveInfo.startTime = startTime;
          this.sieveInfo.endTime = endTime;
          this.$store.commit("changeSieveDataFunc",this.sieveInfo);
          this.show = false;
          Toast.success({
            message:'查询成功',
            duration:1500
          });
        }
      }
    },
    seiveTime(){
      var date = new Date();
      var year = date.getFullYear();
      var month = date.getMonth()+1 < 10 ? "0"+(date.getMonth()+1) : (date.getMonth()+1);
      var day = date.getDate() < 10 ? "0"+date.getDate() : date.getDate();
      this.max_date = year+"-"+month+"-"+day;
      this.nowDate = year+"-"+month+"-"+day;
      var min_year = year - 2;
      this.min_date = min_year+"-"+month+"-"+day;
    },
    showPopup() {
      this.show = true
    },
    showAreaFunc() {
      this.showArea = true
    },
    showStationFunc() {
      this.showStation = true
    },
    boolColSpan() {
      //根据页面title动态加载colSpan
      let title = this.$store.state.jumpPage.titleRes;
      console.log(this.$store.state.jumpPage.titleRes)
      //利用字符串分割 分割出最后的五个字母判断是table还是chart
      let sliceTitle = title.slice(-5);
      //输出测试
      console.log("子页面类型" + sliceTitle)
      //如果是图表类型的子页面,设置colSPan
      if (sliceTitle === 'Chart') {
        // this.boolStation = false;
        this.colSpan = 12;
      } else if (sliceTitle === 'Table') {
        //做判断：是否为台站工况
        if (title === 'stationTable'){
          // this.boolStation = true;
          this.colSpan = 12;
        }
        else {
          //隐藏台站工况区域
          // this.boolStation = false;
          this.colSpan = 12;
        }
      }
    },
    //矿区和台站触发更改的方法
    onConfirm(value) {
      //更改当前地区筛选条件
      this.$store.commit("changeSieveAreaFunc",value);
      //获取更改后地区筛选值
      this.showArea = false;
      Toast.success({
        message:'切换至'+value+'矿区',
        duration:1500
      });
    },
    onCancel() {
      Toast('取消');
    },
  }
}
</script>

<style scoped>
.tool-space {
  height: 40px;
}
.inputContainer{
  padding-top: 7px;
  padding-bottom: 7px;
}
</style>